<template>
  <div class="news">
    <div class="news-list">
      <a
        :href="v.url"
        class="news-item"
        v-for="v,i in list"
        :key="i"
        target="_blank"
      >
        <div class="news-img">
          <van-image
            class="img"
            :src="v.image"
          >
          </van-image>
        </div>
        <div class="news-info">
          <h3 class="h3 omit">
            {{v.title}}
          </h3>
          <div class="bottom">
            {{v.time}} 来源：{{v.form}}
          </div>
        </div>
      </a>

    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [
        {
          url: "http://www.ceweekly.cn/2020/0708/304304.shtml",
          image: require("../../assets/news/news-1.jpg"),
          title:
            "我国15分钟测出新冠病毒技术进入最后测试，国外强烈关注我国15分钟测出新冠病毒技术进入最后测试...",
          time: "2020-07-08",
          form: "经济网",
        },
        {
          url: "http://www.mems.me/mems/microfluidics_202002/9390.html",
          image: require("../../assets/news/news-2.jpg"),
          title: "量准纳米光学芯片技术突破高端无创分子检测设备限制",
          time: "2020-02-27",
          form: "麦姆斯咨询",
        },
        {
          url: "https://mp.weixin.qq.com/s/0U7uZcoMGmtBa9r0UTwcog",
          image: require("../../assets/news/news-3.jpg"),
          title:
            "量准公司推出新型蛋白分子互作等离子光学传感芯片设备，大幅降低高端药物分子检测设...",
          time: "2019-08-08",
          form: "动脉网",
        },
        {
          url: "http://tech.ifeng.com/c/7oodCazD5to",
          image: require("../../assets/news/news-4.jpg"),
          title:
            "世界级颠覆性突破：量准纳米光学芯片技术突破高端药物筛选设备限制",
          time: "2019-08-02",
          form: "凤凰网商业",
        },
        {
          url: "http://www.ci123.com/article.php/76933",
          image: require("../../assets/news/news-5.jpg"),
          title: "优孕走过多少坑，智慧优孕设备”佑蜜”成为新宠",
          time: "2019-02-21",
          form: "育儿网",
        },
        {
          url: "http://www.myzaker.com/article/5c763b971bc8e0da67000066",
          image: require("../../assets/news/news-6.jpg"),
          title: "我国15分钟测出新冠病毒技术进入最后测试，国外强烈关注",
          time: "2019-02-21",
          form: "育儿网",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.news {
  .news-list {
    padding: 0 15px;
  }

  .news-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid rgba($color: #3e464f, $alpha: 0.25);
  }

  .news-img {
    width: 130px;

    .img {
      width: 130px;
    }
  }

  .news-info {
    position: relative;
    margin-left: 15px;
    color: #3f4650;

    h3 {
      font-size: 14px;
    }

    .bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      font-size: 12px;
      text-align: right;
    }
  }
  .omit {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
</style>
